<div class="hero-insert-component">
    <mat-form-field>
        <input
            matInput
            id="insert-name"
            #input
            [(ngModel)]="name"
            [autofocus]="true"
            [name]="'name_' + randomString()"
            placeholder="Name"
        />
    </mat-form-field>
    <div
        class="error"
        *ngIf="errors.name"
    >{{errors.name}}</div>
    <br />
    <mat-form-field>
        <input
            matInput
            id="insert-color"
            [(ngModel)]="color"
            [name]="'color_' + randomString()"
            placeholder="Color"
            autocomplete="off"
        />
    </mat-form-field>
    <div
        class="error"
        *ngIf="errors.color"
    >{{errors.color}}</div>
    <br />
    <button
        mat-raised-button
        color="primary"
        (click)=submit()
        autocomplete="off"
    >insert</button>
</div>
